<!--
 * @Author: CoderLPF
 * @Date: 2020-03-17 11:02:09
 * @LastEditTime: 2020-05-06 13:50:42
 * @LastEditors: CoderLPF
 * @Description: 
 * @FilePath: \fzx-system-fd\src\views\me.vue
 -->
<template>
  <el-row v-loading="loading" :gutter="6">
    <el-tabs tab-position="left" v-model="activeName">
      <el-tab-pane label="密码修改" name="first">
        <el-form
          size="small"
          style
          ref="userInfo"
          :model="userInfo"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input :disabled="true" v-model="userInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input type="password" v-model.trim="userInfo.password"></el-input>
          </el-form-item>
          <el-form-item label="再次输入" prop="newpwd">
            <el-input type="password" v-model.trim="userInfo.newpwd"></el-input>
          </el-form-item>
          <el-form-item style="text-align:right">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="运行记录" name="second">
        
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="third">
        
      </el-tab-pane>-->
    </el-tabs>
  </el-row>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value !== "" && value !== this.userInfo.password) {
        callback(new Error("两次输入密码不一致，请重新输入"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        password: [
          {
            require: true,
            min: 4,
            message: "密码不能低于4位",
            trigger: "blur"
          },
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        newpwd: [
          {
            require: true,
            min: 4,
            message: "密码不能低于4位",
            trigger: "blur"
          },
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
			},
			
			loading:false,

      userInfo: {
        id: 0,
        username: "",
        password: "",
        newpwd: ""
      },
      activeName: "first"
    };
  },

  created() {
    var user = this.$store.state.m_user.userInfo;
    this.userInfo.id = user.id;
    this.userInfo.username = user.user_name;
  },

  methods: {
    onSubmit() {
      this.$refs["userInfo"].validate(res => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
							this.loading = true;
              this.$api.user
                .updatePwd(this.userInfo)
                .then(res => {
									this.loading = false;
                  if (res.code === 200) {
                    this.$message.success("密码修改成功");
                    window.sessionStorage.removeItem("token");
                    window.sessionStorage.removeItem("vuex");
                    this.$store.commit("reset");
                    this.$router.push("/login");
                  }
                })
                .catch(err => {
									this.loading = false;
                  console.log(err);
                });
            })
            .catch(() => {
              return;
            });
        }
      });
    },
    onCancel() {
      this.$router.go(-1);
    }
  }
};
</script>


<style lang="less" scoped>
.el-row {
  padding: 50px;
}
.el-tabs {
  width: 100%;
}
.el-form {
  width: 60%;
}
</style>